<html>
<head>

<link type="text/css" rel="stylesheet" href="/css/index.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.corners.min.js"></script>

<script type="text/javascript">
String.prototype.startsWith = function(str) {return (this.match("^"+str)==str)}

$(document).ready(function() {
  $('.rounded').corners('40px');
  $('li').live('click', function (event) {
    var el = event.target || event.srcElement;
    if (el.tagName != 'A') {
      $(this).find('div').slideToggle();
    }
  });
});

function expandAllInfoBoxes() {
  $('#data').find('div').each(function(i, el) {
    $(this).slideToggle();
  });
}

function setLoadingUI(params) {
  var loadingText = params['loading'] || null;
  var data = params['data'] || null;
  if (loadingText) {
    $('#loading').text(loadingText).show();
  } else {
    $('#loading').empty().fadeOut('slow');
  }
  if(data)  {
    $('#data').html(data);
    $('#loading').fadeOut('slow');
  } else {
    $('#data').empty();
  }
}

function fetchData(url, first, last, age, team) {
  setLoadingUI({'loading': "Sync'ing... can take 20 seconds or more..."});
  $.post(url, {first: first, last:last, age:age, team:team}, function(data) {
    html = [];
    //html.push('<b>' + url + '</b><br/>');
    for(var i = 0, entry; entry = data[i]; ++i) {
      html.push('<li>');
      html.push('<img src="/images/icon_' + entry.type + '.gif">');
      if (entry.title.startsWith("My Tracks"))
      {
        entry.title = entry.title + " <b>Sync'ed</b>";
      }
      html.push('<span style="margin-left:15px;margin-right:15px;">' +
                entry.title + '</span>');
      
      var infoBoxHtml = [];
      for (link in entry.links)
      {
        infoBoxHtml.push('link: ' + link + '<br/>');
      }
      infoBoxHtml.push('<a href="' + entry.links['alternate'] +
                         '" target="nw">Open in Google Docs &raquo;</a><br>');
      infoBoxHtml.push('<span class="right_margin">resource id:</span>' +
                       entry.resourceId + '<br>');
      infoBoxHtml.push('<span class="right_margin">created:</span>' +
                       entry.published + '<br>');
      infoBoxHtml.push('<span class="right_margin">updated:</span>' +
                       entry.updated + '<br>');
      if (entry.lastModifiedBy) {
        infoBoxHtml.push('<span class="right_margin">modified by:</span>' +
                          entry.lastModifiedBy + '<br>');
      }
      if (entry.lastViewed) {
        infoBoxHtml.push('<span class="right_margin">last viewed:</span>' +
                         entry.lastViewed + '<br>');
      }
      //if (entry.db_entry) { infoBoxHtml.push('<span class="right_margin">db_entry:</span>' + entry.db_entry + '<br>'); }
      infoBoxHtml = '<div class="info_box">' + infoBoxHtml.join('') +  '</div>';
      html.push(infoBoxHtml);
      
      html.push('</li>');
    }
    setLoadingUI({'loading': 'Done!',
                  'data': '<ul>' + html.join('') + '</ul>'});
  }, 'json');
}
</script>

</head>
<body>

<div id="header">

<table height="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" valign="bottom">
{% if user %}
  <span style="color:red;margin-right:8px;">logged in:</span> {{ user }}
{% endif %}
</td>
<td width="50%" align="center" valign="bottom">
  <div id="loading"></div>
</td>
<td width="25%" valign="bottom" align="right">
{% if revoke_token_link %}
  <a href="/revoke_token">revoke oauth token</a>
{% endif %}
</td>
</tr>
</table>

</div>

{% if revoke_token_link %}
{% comment %}
<div id="oauth_stats">
  <h4>OAuth Stats:</h4>
  <table>
  <tr><td width="200">oauth_signature_method:</td><td>{{ sig_method }}</td></tr>
  <tr><td>oauth_consumer_key:</td><td>{{ consumer.key }}</td></tr>
  <tr><td>oauth_token:</td><td>{{ oauth_token.key }}<br>( oauth_token_secret: {{ oauth_token.secret }} )</td></tr>
  </table>
</div>
{% endcomment %}

<center>
<a href="#" onclick="expandAllInfoBoxes();">toggle all</a>
<div id="data"><!-- dynamically filled --></div>

{% comment %}
<form action="{{ form_action }}" method="post">
<input type="button" value="{{ form_value }}" class="rounded button" onclick="fetchData('{{ form_action }}', first.value, last.value, age.value, team.value);">
{% endcomment %}

<form action="{{ form_action }}" method="post">
    <table border="0">
	<tr><td align="right">First:</td><td> <input name="first" value="{{save_user.first}}"/></td></tr>
	<tr><td align="right">Last:</td><td> <input name="last" value="{{save_user.last}}"/></td></tr>
	<tr><td align="right">Age:</td><td> <input name="age" value="{{save_user.age}}"/></td></tr>
	<tr><td align="right">Team:</td><td> <input name="team" value="{{save_user.team}}"/></td></tr>
	    </table>
<br/><input type="button" value="{{ form_value }}" onclick="fetchData('{{ form_action }}', first.value, last.value, age.value, team.value);">
</form>
<hr/>
<a href="http://wsxnyc.org/results-1.0-SNAPSHOT/results/results/showme.jsp?first={{save_user.first}}&last={{save_user.last}}">Go to http://run.wsxnyc.org for {{save_user.first}} {{save_user.last}}</a><br/>
<a href="http://wsxnyc.org/results-1.0-SNAPSHOT/results/results/history.jsp?first={{save_user.first}}&last={{save_user.last}}">Go to http://run.wsxnyc.org for {{save_user.first}} {{save_user.last}} (History only)</a>

{% comment %}
</form>
{% endcomment %}

</center>

{% else %}
<table id="fill"><tr><td>
<form action="{{ form_action }}" method="post">
  <input type="submit" value="{{ form_value }}" class="rounded button"><br><br>
  Use my Google Apps domain: &nbsp; <input type="text" name="domain" value="default">
</form>
</td></tr></table>
{% endif %}

<!-- {{save_user}} -->

</body>
</html>
